<script lang="ts" setup>
import dayjs from '#build/dayjs.imports.mjs'
import {
  ArrowLeft,
  ArrowRight,
} from '@element-plus/icons-vue'
import { getUrlByFileNo } from '~/api/file'
import { getxchdList } from '~/api/home'

const listOne = ref<any[]>([])
const list = ref<any[]>([])
const queryParams = reactive(
  {
    page: {
      rownumber: 7,
      pageNo: 1,
    },
    condition: [{
      colName: 'column_recommendation',
      ruleType: 'eq',
      value: '是',
    }, { colName: 'positions', ruleType: 'inset', value: '首页' }],
    order: [{
      colName: 'release_time',
      orderType: 'desc', // asc升序 desc降序
    }],
    positions: '首页',
  },
)
function extractTextFromPTags(htmlString: string) {
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlString, 'text/html')
  const pTags = doc.getElementsByTagName('p')
  let text = ''
  for (let i = 0; i < pTags.length; i++) {
    text += pTags[i]?.textContent
  }
  return text
}
function getData() {
  getxchdList(queryParams).then((res) => {
    res.data = res.data?.map((item) => {
      return {
        title: item.title_name || item.title || item.key_work,
        blurd: extractTextFromPTags(item.contents) || extractTextFromPTags(item.remark),
        info: item.publisher || item.modify_user,
        time: dayjs(item.release_time || item.modify_time).format('YYYY-MM-DD'),
        url: item.cover_file_name || getUrlByFileNo(item.activity_image),
        Id: item.id,
        no: item.activity_no,
        type: item.classify_name.split('/')[1],
        data:{...item}
      }
    })
    listOne.value = res.data.slice(0, 1)
    list.value = res.data.slice(1, 7)
  }).catch(() => {
  })
}
function upper() {
  if (queryParams.page.pageNo != 1) {
    queryParams.page.pageNo--
  }
  getData()
}
function next() {
  console.log(list.value.length)
  if (list.value.length < 6) {

  }
  else {
    queryParams.page.pageNo++
    getData()
  }
}
onMounted(() => {
  getData()
})
function toList() {
  navigateTo({
    path: `/peopleHealth/HealthActivity`,
    query: {
    },
  })
}
const router = useRouter()
function toDetail(item: any) {
  if (item.type === '问卷调查') {
    router.push({ path: `/peopleHealth/questSurvey`, query: { no: item.no } })
  }
  else {
    router.push({ path: `/peopleHealth/HealthActivityDetail/${item.Id}&${item.type}` })
  }

  // router.push({
  //   path: '/peopleHealth/detail',
  //   query: {
  //     id: item.id,
  //   },
  // })
}
</script>

<template>
  <div class="h-160">
    <div class="flex items-end justify-center pt-30px">
      <span class="mr-10px inline-block h-8px w-8px bg-#0E9472 -mt-15px" />
      <span class="px-2 font-bold" text="#1D2128 22px">宣传活动</span>
      <span class="ml-10px inline-block h-8px w-8px bg-#0E9472 -mt-15px" />
    </div>
    <div class="flex justify-center font-black font-serif -mt-10px" text="#031D2822 26px">
      CAMPAIGN
    </div>
    <div class="flex justify-between px-60 py-6">
      <div v-for="item in listOne" class="relative w-25% cursor-pointer" border="1px solid #E5E5EA" hover="text-#0E9472">
        <img class="h-200px w-100%" :src="item.url" alt="">
        <div class="h-50 p-15px" text=" 16px">
          <div class="flex items-end justify-between py-5px">
            <div text="#1D2128 14px" class="pt-2 font-bold font-sans" style="border-bottom:5px solid #35B389">
              {{ item.type }}
            </div>
            <div>
              <el-button size="small" color="#35B389" plain @click="toList">
                更多
              </el-button>
            </div>
          </div>
          <div class="truncate" text="24px" @click="toDetail(item)">
            {{ item.title }}
          </div>
          <div class="line-clamp-4 text-ellipsis pt-3" text="14px">
            {{ item.blurd }}
          </div>
        </div>
      </div>
      <div class="grid grid-cols-2 w-72% gap-3 p-5" border="1px solid #E5E5EA">
        <div v-for="item in list" class="h-110px flex cursor-pointer" hover="text-#0E9472" @click="toDetail(item)">
          <img class="w-40%" :src="compressImage(item.url)" alt="">
          <div class="w-60% bg-#fff">
            <div class="line-clamp-2 w-100% text-ellipsis px-5px" text="16px">
              {{ item.title }}
            </div>
            <div class="px-5px pt-30px" text="#AEAEB2">
              {{ item.time }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-between px-80 py-2">
      <div />
      <div>
        <el-button color="#35B389" :icon="ArrowLeft" plain @click="upper()" />
        <el-button color="#35B389" :icon="ArrowRight" style="color:#fff" @click="next()" />
      </div>
    </div>
  </div>
</template>
